<template>
    <div class="mine">
      <h3>饿了么</h3>
      <div class="user">
        <div class="img">
            <img src="../../assets/touxiang.jpg" alt="">
        </div>
        <div class="id">
            <p>点餐来饿了么</p>
            <p>{{userphone}}</p>
        </div>
        <div class="shezhi">
            <span>账户设置</span>
        </div>
      </div>
      <div class="card">
        <p class="text">
            <span class="p1">吃货卡</span>
            <span class="p2">吃货豆:</span>
            <span class="num">1461</span>
        </p>
          <p class="p4">升级超级吃货卡，每月得无门槛红包，下单5倍反吃货豆</p>
      </div>
      <div class="tool">
          <p class="tit">常用工具</p>
          <ul>
              <li v-for="(item,index) in list" :key="index" @click="toCollect(index)">
                <van-icon :name="item.icon" size="24" />
              <p>{{item.name}}</p>
              </li>
          </ul>
      </div>
      <div class="zujian">
        <div class="money">
        <h3>邀好友赚现金</h3>
        <p>最高得15元</p>
      </div>
      <div class="serve">
        <h3>饿了么服务号</h3>
        <p>关注后及时接收服务通知</p>
      </div>
      </div>
      
    </div>
  </template>
  
  <script>
  export default {
      data(){
          return{
              userphone :JSON.parse(localStorage.getItem('userinfo')).phone,
              list:[
                  {name:"我的地址",icon:'location-o'},
                  {name:"我的咨询",icon:'phone-circle-o'},
                  {name:"店铺关注",icon:'like-o'},
                  {name:"评价有礼",icon:'star-o'}
              ]
          }
      },
      methods:{
        toCollect(index){
            if(index==2){
                this.$router.push('/collect');
            }else if(index==0){
              this.$router.push('/address');
            }
        }
      }
  }
  </script>
  
  <style lang="scss" scoped>
  .mine {
    height: 100%;
    background-color: #e1e1e1;
    padding: 6px 12px;
  }
  .user {
    width: 100%;
    height: 68px;
    margin-top: 18px;
  }
  .user .img {
    width: 68px;
    height: 68px;
    border-radius: 100%;
    float: left;
    
  }
  .user .img img {
    width: 68px;
    height: 68px;
    border-radius: 100%;

  }
  .id {
    padding: 0 10px;
    box-sizing: border-box;
    float: left;
  }
  .id p:nth-child(1) {
    font-weight: bold;
    padding: 10px 0;
  }
  .id p:nth-child(2) {
    font-size: 12px;
    color: #999;
  }
  .shezhi {
    float: right;
    margin-top: 18px;
  }
  .shezhi span {
    display: inline-block;
    border: 1px solid #000;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 14px;
  }
  .card{
      width: 100%;
      height: 80px;
      background:linear-gradient(to right,rgb(32, 127, 243),rgb(137, 179, 223));
      border-radius: 8px;
      margin: 14px auto 8px;
      text-align: center;
      box-sizing: border-box;
      color: white;
      overflow: hidden;
  }
  .card .text {
    text-align: left;
    margin-top: 10px;
  }
  .card .text .p1 {
   padding: 0 14px;
   font-size: 19px;
   display: inline-block;
    border-right: 1px solid #ccc;

  }
  .card .text .p2 {
    padding-left: 10px;
    font-size: 12px;
  }
  .card .text .num {
    font-size: 20px;
  }
  .p4{
    text-align: left;
    padding: 10px 14px;
    font-size: 12px;
      color: #e1e1e1;
  }
  .tit{
      font-weight: bold;
  }
 .tool {
    background-color: #fff;
    border-radius: 8px;
    height: 105px;
    padding: 14px 10px;
    box-sizing: border-box;
 }
  
  ul{
      width: 100%;
      list-style: none;
      display: flex;
      margin-top: 16px;
  }
  ul li{
      width: 25%;
      display: flex;
      font-size: 13px;
      flex-direction: column;
      justify-content: center;
      align-items: center; 
  }
  .zujian {
    width: 100%;
    height: 200px;
    display: flex;
    padding: 10px 0;
    box-sizing: border-box;
    justify-content: space-between;
  }
  .money ,.serve {
    width: 49%;
    height: 100%;
    background-color: #fff;
    border-radius: 10px;
    padding: 16px 10px;
    box-sizing: border-box;
  }
  .zujian p {
    font-size: 12px;
    color: #999;
    padding: 6px 0;
  }
  </style>
